revision:
A dropdown list is a toggleable menu that allows the user to choose one option from multiple ones. The options in this list are defined in coding, which is associated with a function. When you click or choose this option, that function is triggered and starts performing.
The JavaScript dropdown List is a quick replacement of the HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values. It has several out-of-the-box features, such as data binding, filtering, grouping, UI customization, accessibility, and preselected values.
The <select> tab is used with <option> tab to create the simple dropdown list in HTML. After that JavaScript helps to perform operation with this list.
Other than this, you can use the container tab <div> to create the dropdown list. Add the dropdown items and links inside it.
<div>
<form action="">
<b>select you favorite color using dropdown list</b>
<select id="myList" onchange="dropdownTutorial1()">
<option>choose color</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="violet">violet</option>
<option value="indigo">indigo</option>
<option value="blue">blue</option>
</select>
<p>your selected color is:
<input type="text" id="favorite" size="20"></p>
</form>
</div>
<script>
function dropdownTutorial1(){
var myList =document.getElementById('myList');
document.getElementById('favorite').value = myList.options[myList.selectedIndex].text;
}
</script>
<div>
<select id="country" class="spec">
<option value="None" >-- Select --</option>
<option value="ID001" selected>China</option>
<option value="ID002">United States</option>
<option value="ID003">Malaysia</option>
<option value="ID004">Philippines</option>
<option value="ID005">Thailand</option>
<option value="ID006">Jordania</option>
<option value="ID007">Italy</option>
<option value="ID008">Spain</option>
<option value="ID009">France</option>
<option value="ID010">United Kingdom</option>
</select><br>
<button class="spec"type="button" onclick="getSelectedText()">get selected country</button>
<p class="spec" id="country_name"></p>
<button class="spec"type="button" onclick="getSelectedValue()">get selected value</button>
<p class="spec" id="country_value"></p>
</div>
<script>
function getSelectedText(){
var element = document.getElementById("country");
var result = element.options[element.selectedIndex].text;
document.getElementById("country_name").innerHTML = result;
}
function getSelectedValue(){
var element = document.getElementById("country");
var result_1 = element.options[element.selectedIndex].value;
document.getElementById("country_value").innerHTML = result_1;
}
</script>
<div class="dropdown">
<button onclick="show_hide()" class="button">Choose Language</button>
<!-- dropdown list items will show when we click the drop button -->
<div id="list-items">
<a href="#"> Hindi </a>
<a href="#"> English </a>
<a href="#"> Spanish </a>
<a href="#"> Chinese </a>
<a href="#"> Japanese </a>
<a href="#"> Dutch </a>
</div>
</div>
<style>
.dropdown { position: relative; display: inline-block;}
.button {padding: 1vw 1vw; font-size: 1vw;cursor:pointer;}
#list-items {display: none; position: absolute; background-color: skyblue; min-width: 15vw;}
#list-items a {display: block; font-size: 1.2vw; background-color: #ddd; color: black; text-decoration: none; padding: 1vw;}
</style>
<script>
function show_hide() {
var click = document.getElementById("list-items");
if(click.style.display ==="none") {
click.style.display ="block";
} else {
click.style.display ="none";
}
}
</script>
<div class="spec">
<select id="language" onChange="update()">
<option value="en" selected>English</option>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>
<input type="text" id="value">
<input type="text" id="text">
</div>
<script>
function update() {
var select = document.getElementById('language');
var option = select.options[select.selectedIndex];
document.getElementById('value').value = option.value;
document.getElementById('text').value = option.text;
}
update();
</script>
click on the "Dropdown" link to see the dropdown menu.
<div class="spec">
<p class="spec">click on the "Dropdown" link to see the dropdown menu.</p>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdownA">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<style>
.navbar {overflow: hidden;background-color: #333;font-family: Arial, Helvetica, sans-serif;}
.navbar a {float: left; font-size: 1.4vw; color: white; text-align: center; padding: 1vw 1.6vw; text-decoration: none;}
.dropdownA {float: left; overflow: hidden;}
.dropdownA .dropbtn { cursor: pointer; font-size: 1.4vw; border: none; outline: none; color: white; padding: 1vw 1.6vw;
background-color: inherit;font-family: inherit; margin: 0;}
.navbar a:hover, .dropdownA:hover .dropbtn, .dropbtn:focus {background-color: red;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 16vw; box-shadow: 0px 8px 16px
0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {float: none; color: black; padding: 1vw 1.6vw; text-decoration: none; display: block;text-align: left;}
.dropdown-content a:hover {background-color: #ddd;}
.showIt {display: block;}
</style>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("showIt");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('showIt')) {
myDropdown.classList.remove('showIt');
}
}
}
</script>
Use the input field to search for a specific dropdown link.
<div class="spec">
<div class="dropdownB">
<button onclick="myFunctionB()" class="dropbtnB">Dropdown</button>
<div id="myDropdownB" class="dropdown-contentB">
<input type="text" placeholder="Search.." id="myInput"
onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
</div>
<style>
.dropbtnB {background-color: #04AA6D; color: white; padding: 1.6vw; font-size: 1.6vw; border: none; cursor: pointer;}
.dropbtnB:hover, .dropbtnB:focus {background-color: #3e8e41;}
#myInput { box-sizing: border-box; background-image: url('search.png'); background-position: 1vw 1vw; background-repeat: no-repeat; font-size: 1.2vw; padding: 1.4vw 2vw 1.2vw 4.5vw;
border: none; border-bottom: 1px solid #ddd;}
#myInput:focus {outline: 3px solid #ddd;}
.dropdownB {position: relative; display: inline-block;margin-left: 5vw;}
.dropdown-contentB {display: none; position: absolute; background-color: #f6f6f6; min-width: 23vw; overflow: auto; border: 1px solid #ddd; z-index: 1;}
.dropdown-contentB a {color: black; padding: 1.2vw 1.6vw; text-decoration: none; display: block;}
.dropdownB a:hover {background-color: #ddd;}
.showAll {display: block;}
</style>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunctionB() {
document.getElementById("myDropdownB").classList.toggle("showAll");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdownB");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
<div class="dropdown">
<button class="one_dropdown">Dropdown</button>
<div class="two_dropdown">
<a href="#">Section 1</a>
<a href="#">Section 2</a>
<a href="#">Section 3</a>
</div>
</div>
<style>
.one_dropdown {background-color: #0080ff; color: white; padding: 1.6vw; font-size: 1.6vw; border: none; }
.dropdown {position: relative;display: inline-block; width:10vw; height: auto;}
.two_dropdown {display: none; position: absolute; background-color: #f1f1f1; min-width: 16vw;
box-shadow: 0vw 8vw 1.6vw 0vw rgba(0,0,0,0.2); z-index: 1; }
.two_dropdown a {color: black; padding: 1.2vw 1.6vw; text-decoration: none; display: block;}
.two_dropdown a:hover {background-color: #ddd;}
.dropdown:hover .two_dropdown {display: block;}
.dropdown:hover .one_dropdown {background-color: #00bfff;}
</style>
<div class="dropdown_b">
<button>Useful resources
<div class="dropdown-content">
<a href="https://www.wikipedia.org/">Wikipedia
<a href="https://google.com/">Google
<a href="https://www.microsoft.com">Microsoft
<a href="https://www.lwitters.com">My website
</div>
</div>
<style>
.dropdown_b {display: inline-block;position: relative;}
.dropdown-content {display: none; position: absolute; width: 10vw;
overflow: auto; box-shadow: 0vw 1vw 1vw 0vw rgba(0,0,0,0.4);}
.dropdown_b:hover .dropdown-content {display: block;}
.dropdown-content a {display: block; color: #000000; padding: 0.5vw;
text-decoration: none; }
.dropdown-content a:hover {color: #FFFFFF; background-color: #00A4BD;}
</style>
<h4 style="margin-left:1vw;">Seven Wonders of the world</h4>
<form style="margin-left:1vw;">
<select name = "dropdown_c">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
<form action="#" style="margin-left:4vw;">
<label for="cars">Choose the cars you like</label><br>
<select name="cars" id="cars" multiple>
<option data-count="2" value="Alfa Romeo">Alfa Romeo</option>
<option data-count="23" value="Audi">Audi</option>
<option data-count="433" value="BMW">BMW</option>
<option data-count="45" value="Chrysler">Chrysler</option>
<option data-count="476" value="Citroen">Citroen</option>
<option data-count="78" value="Dodge">Dodge</option>
<option data-count="123" value="Fiat">Fiat</option>
<option data-count="32" value="Ford">Ford</option>
<option data-count="3" value="Honda">Honda</option>
<option data-count="342" value="Hyundai">Hyundai</option>
<option data-count="45" value="Isuzu">Isuzu</option>
<option data-count="653" value="Jaguar">Jaguar</option>
<option data-count="3" value="Jeep">Jeep</option>
<option data-count="23" value="Kia">Kia</option>
<option data-count="5656" value="Lamborghini">Lamborghini</option>
<option data-count="2133" value="Land Rover">Land Rover</option>
<option data-count="2" value="Lexus">Lexus</option>
<option data-count="43" value="Lotus">Lotus</option>
<option data-count="54" value="Maserati">Maserati</option>
<option data-count="5" value="Mazda">Mazda</option>
<option data-count="1" value="Mercedes-Benz">Mercedes-Benz</option>
<option data-count="34" value="Mini">Mini</option>
<option data-count="23" value="Mitsubishi">Mitsubishi</option>
<option data-count="56" value="Nissan">Nissan</option>
<option data-count="98" value="Peugeot">Peugeot</option>
<option data-count="210" value="Porsche">Porsche</option>
<option data-count="3" value="Renault">Renault</option>
<option data-count="76" value="Saab">Saab</option>
<option data-count="45" value="Skoda">Skoda</option>
<option data-count="3" value="smart">smart</option>
<option data-count="23" value="Subaru">Subaru</option>
<option data-count="7" value="Suzuki">Suzuki</option>
<option data-count="45" value="Toyota">Toyota</option>
<option data-count="23" value="Volkswagen">Volkswagen</option>
<option data-count="6" value="Volvo">Volvo</option>
</select>
<p class="spec">Hold down the Ctrl (windows) or Command (Mac) button to select multiple options
<input type="submit" />
</form>
<style>
form{width: 40vw;}
label{display: block; width: 20vw; background: firebrick; color: white; cursor: pointer; padding: 1vw 0.5vw 0.5vw; position:
relative;}
#cars{width: 20vw; height: 10vw; border: 0.1vw solid green;}
option:hover{color:darkblue; background:orange;}
</style>
<form action="#">
<label id="one" for="lang">Language</label>
<select name="languages" id="lang" multiple>
<optgroup label="first-choice">
<option value="select">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
</optgroup>
<optgroup label="second-choice">
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</optgroup>
</select>
<input type="submit" value="Submit" />
</form>
<style>
#lang{margin-bottom: 1vw; margin-top: 1vw; font-family: cursive, sans-serif;
outline: 0; background:#2ecc71; color: #fff; border: 1px solid crimson; padding: 0.4vw;
border-radius: 1vw;}
#one{width: 15vw; color: black; background:darkgrey;}
</style>